<template>
  <div style="height:100%;">
        <navbar :title="$t('face_confirm')"></navbar>
        <div class="content" style="background: #ffffff;">
            <!-- 列表数据 -->
            <div style="height: calc(100% - 47px);" class="body-content">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <div class="detail-box" style="padding: 20px 30px;">
                        <div class="userinfo">
                            <van-image
                            round
                            width="40px"
                            height="40px"
                            :src="appUrl + attendanceDetail.urxExtra43"
                            />
                            <div class="name" style="margin-top: 10px;height: 20px;">{{ attendanceDetail.usrDisplayBil }}</div>
                        </div>
                        <div class="check-in-time">
                            <span>{{$t('cos_check_in_time')}}：</span><span>{{attendanceDetail.checkInTime}}</span>
                        </div>
                        <div class="evidence">
                            <div>{{$t('evidence')}}：</div>
                            <van-image
                            width="200px"
                            height="200px"
                            :src="appUrl + attendanceDetail.imgBase64"
                            @click="previewImage"
                            />
                        </div>
                        <div class="btn-box">
                            <van-button type="info" @click="setAbset" style="background: #075ebb;">{{$t('set_abscence')}}</van-button>
                            <van-button type="warning" @click="setNormal" style="background: #ff9900;">{{$t('set_normal')}}</van-button>
                        </div>
                    </div>
                </van-pull-refresh>
            </div>
        </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
    name: 'faceConfirm',
    components: {
        [ImagePreview.Component.name]: ImagePreview.Component
    },
    data() {
        return {
            attendanceDetail: [],
            isLoading: false,
            unConfirmNum: '', // 未确认人数
            isRefresh: false,
            ilsId: this.$route.query.id, // 日程id
            images: [],
            usrEntId: this.$route.query.userId
        };
    },
    mounted() {
        this.getDetail();
    },
    methods: {
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.getDetail();
                this.isRefresh = false;
            }, 900);
        },
        getDetail() {
            let params = {
                usrEntId: this.$route.query.userId,
                type: this.$route.query.type
            };
            this.$axios.get(`/app/api/course/lesson/clock/record/${this.ilsId}`, {params}).then((res) => {
                if (res.data) {
                    this.attendanceDetail = res.data;
                }
            });
        },
        previewImage() {
            const imageUrl = this.appUrl + this.attendanceDetail.imgBase64;
            this.images = [imageUrl];
            ImagePreview({
                images: this.images,
                startPosition: 0
            });
        },
        setNormal() {
            let params = {
                type: this.$route.query.type,
                ilsId: this.ilsId
            };
            this.$axios.put(`/app/api/course/lesson/clock/set/normal/${this.usrEntId}`, params).then((res) => {
                if (res.status === 200) {
                    this.$toast(this.$t('set_ok'));
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 800);
                }
            });
        },
        setAbset() {
            let params = {
                type: this.$route.query.type,
                ilsId: this.ilsId
            };
            this.$axios.put(`/app/api/course/lesson/clock/set/absent/${this.usrEntId}`, params).then((res) => {
                if (res.status === 200) {
                    this.$toast(this.$t('设置成功'));
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 800);
                }
            });
        }
    }
};
</script>

<style scoped lang='less'>
/deep/.van-grid {
    padding: 20px;
    padding-left: 20px !important;
}
.data-badge {
    position: absolute;
    right: 56px;
    top: 0px;
    background: red;
    color: #fff;
    font-size: 8px;
    display: inline-block;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    border-radius: 50%;
}
/deep/.van-tabs {
    box-shadow: 0 6px 10px rgba(0, 0, 0, .1);
}
.color0ace17 {
    color:#0ace17
}
.colorRed {
    color: #E63442;
}
.colorOrange {
    color: orange;
}
.userinfo {
    display: flex;
    align-items: center;
    padding: 0 10px;
    .name {
        margin-left: 30px;
        font-weight: 700;
    }
}
.check-in-time {
    margin-top: 20px;
    span:first-child {
        font-weight: 700;
        margin-right: 10px;
    }
}
.evidence {
    margin-top: 20px;
    display: flex;
    div {
        font-weight: 700;
        margin-right: 10px;
    }
}
.btn-box {
    margin-top: 40px;
    text-align: center;
    /deep/ .van-button {
        height: 28px;
        width: 120px;
        border-radius: 5px;
    }
}
</style>
